import React, { useEffect, useRef, useState } from 'react';  
import * as echarts from 'echarts';  
import { EChartsReact } from 'echarts-for-react';  
import China from '../../data/China.json'; // 假设这是中国地区的提示框数据  
import City from '../../data/City.json'; // 假设这是城市数据和对应的值  
  
// 假设China.json和City.json已经包含了正确的数据  
// 并且已经通过某种方式（比如echarts.registerMap）注册了china地图  
  
// 预先填充geoCoordMap（这通常需要根据GeoJSON数据来生成）  
// 这里只是一个示例，实际数据需要根据您的GeoJSON来填充  
const geoCoordMap = {  
    // '地区名称': [经度, 纬度],  
    // ...  
};  
  
function TwoMap() {  
    const chartRef = useRef<EChartsReact | null>(null);  
    const [option, setOption] = useState({}); // 使用状态来保存option  
  
    useEffect(() => {  
        if (chartRef.current && chartRef.current.getEchartsInstance) {  
            const myChart = chartRef.current.getEchartsInstance();  
              
            // 假设您已经注册了china地图  
            // echarts.registerMap(mapName, chinaJson); // chinaJson应该是您的GeoJSON数据  
  
            // 转换数据为ECharts可以理解的格式  
            const convertData = (rawData) => {  
                return rawData.map(item => ({  
                    name: item.name,  
                    value: [geoCoordMap[item.name][0], geoCoordMap[item.name][1], item.value],  
                }));  
            };  
  
            // 设置option  
            const seriesData = convertData(City); // 假设City是城市数据和对应的值  
  
            const chartOption = {  
                backgroundColor: '#070827',  
                visualMap: {  
                    show: true,  
                    min: 0,  
                    max: 200, // 根据您的实际数据调整  
                    left: '10%',  
                    top: 'bottom',  
                    // 其他配置项...  
                },  
                series: [  
                    {  
                        type: 'scatter', // 或者其他类型，如'effectScatter'  
                        coordinateSystem: 'geo',  
                        data: seriesData,  
                        // 其他配置项...  
                    },  
                    // 其他系列...  
                ],  
            };  
  
            // 设置图表配置  
            setOption(chartOption); // 更新状态以应用新的配置  
  
            // 应用配置到图表实例（如果您想在state更新之前先设置一些默认配置）  
            // myChart.setOption(chartOption);  
        }  
    }, []); // 空数组表示这个effect只会在组件挂载时运行一次  
  
    // 渲染ECharts组件，并将option作为prop传递  
    return (  
        <EChartsReact  
            ref={chartRef}  
            option={option} // 使用state中的option  
            style={{ height: '500px', width: '100%' }}  
            className="react_for_echarts"  
        />  
    );  
}  
  
export default TwoMap;